<template>
  <div id="Setting_div">
    <!-- Card区域 -->
    <div class="Card">
      <!-- 点名班级选择 -->
      <el-card>
        <!-- 主体部分 -->
        <div class="class_body">
          <!-- 选择班级部分 -->
          <div class="choose_class">
            <div class="cc_left">
              <span>点名班级：</span>
              <el-select
                v-model="chooes_class"
                size="small"
                placeholder="请选择需要操作的班级"
              >
                <el-option
                  v-for="item in class_data"
                  :key="item.cid"
                  :label="item.cname"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-card>
      <!-- 点名 -->
      <el-card>
       <!-- 头部信息 -->
        <div slot="header" class="clearfix">
          <span>点名系统</span>
        </div>
        <!-- 班级信息显示部分 -->
        <div class="class_info">
          <span>当前班级学生人数: <el-tag type="danger">{{studentList.length && studentList.length}}</el-tag></span>
          <br>
          <span class="choufun">
            当前抽取方案: 
            <el-tag type="success">{{isLive}} </el-tag>
            <el-tag type="info">{{order_fun}} </el-tag>
            <el-tag type="warning">{{isImg}}</el-tag>
            <el-tag>{{isRead}}</el-tag>
          </span>
        </div>
        <!-- 抽取部分 -->
        <div class="Extract">
          <p>
            <img class="stu_img" v-if="isImg == '显示图片'" :src="now_student.simg">
          </p>
          <p class="stu_name">{{now_student.sname}}</p>
          <p class="stu_id">{{now_student.sid}}</p>
          <el-button class="chouqu"  :type="chou_btn_type" size="medium" @click="chouqu">{{chou_btn_txt}}</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import MyHeader from "../common/Header";
export default {
  name: "Seetting",
  components:{
    MyHeader
  },
  created() {
    this.getClassData();
  },
  data() {
    return {
      chooes_class: "",
      class_data: [],
      studentList: [], //学生列表
      now_student:{ // 当前循环的学生
        cid:"",
        sid:"",
        sname:"香风智乃",
        simg:"http://cdn.u1.huluxia.com/g4/M00/16/C4/rBAAdmBO4A-ABmLEAAjAJ-eJQas772.jpg",
        desc:""
      },
      order_fun:"", // 抽取方案
      isLive:"", // 是否线上抽取  本地抽取 服务器端抽取
      isImg:"", // 是否显示图片  显示图片 不显示图片
      isRead:"", // 是否播报  播报结果 不播报结果
      chou_btn_txt:"开始抽取",
      chou_btn_type:"primary",
      time_setinter:null, // 计时器
    };
  },
  methods: {
    // 请求班级数据
    async getClassData() {
      let { data: res } = await this.$http.get("/classData");
      if (res.status != 200) return this.$message.error(res.message); // 错误
      this.class_data = res.data;
      console.log(this.class_data);
      if (this.class_data.length > 0) {
        // 如果列表不为空 默认选中第一个班级
        this.chooes_class = this.class_data[0].cid;
      }
    },
    // 请求学生列表
    async getStudentList() {
      this.$message("学生数据拉取中~")
      const { data: res } = await this.$http.get("/studentList", {
        params: { cid: this.chooes_class },
      });
      if (res.status != 200) return this.$message.error(res.message);
      this.studentList = res.data;
      this.$message.success("学生数据拉取成功! 可以开始点名了");
      this.now_student = this.studentList[0]
    },
    // 获取用户抽取方案
    async getUserFun(){
      const {data:res} = await this.$http.get("/getUserOrder",{params:{cid:this.chooes_class}});
      if(res.status != 200) return this.$message.error(res.message);
      console.log(res.data);
      let order_fun = res.data.order_fun;
      let isLive = res.data.isLive;
      let isImg = res.data.isImg;
      let isRead = res.data.isRead;
      if(isLive == "false"){
        this.isLive = "本地抽取";
      }else{
        this.isLive = "服务器端抽取";
      }
      if(isImg == "false"){
        this.isImg = "不显示图片";
      }else{
        this.isImg = "显示图片";
      }
      if(isRead == "false"){
        this.isRead = "不播报结果";
      }else{
        this.isRead = "播报结果";
      }
      switch (order_fun) {
        case "1":
          this.order_fun = "顺序抽取"
          break;
        case "2":
          this.order_fun = "顺序随机抽取"
          break;
        case "3":
          this.order_fun = "随机抽取"
          break;
      }
    },
    // 开始抽取 分类
    chouqu(){
      if(this.chou_btn_type == "primary"){ // 开始抽取
        if(this.isLive == "true"){
        // 线上抽取
        this.chou_live();
        }else{
          // 本地抽取
          switch (this.order_fun) {
            case "顺序抽取":
              this.chou_1();
              break;
            case "顺序随机抽取":
              this.chou_2();
              break;
            case "随机抽取":
              this.chou_3();
              break;
          }
        }
      }else{
        clearInterval(this.time_setinter);
        this.chou_end();
        if(this.isRead){
          this.read();
        }
      }
      
    },
    // 线上抽取
    chou_live(){},
    // 本地 顺序抽取
    chou_1(){
      let student_list = this.studentList;
      let student_count = student_list.length;
      this.chou_start();
      let index = 0;
      this.time_setinter = setInterval(() => {
        this.now_student = student_list[index]
        index++;
        if(index == student_count){
          index = 0;
        }
      }, 500);
    },
    // 本地 顺序随机抽取
    chou_2(){},
    // 本地 随机抽取
    chou_3(){},
    // 抽取开始样式
    chou_start(){
      this.chou_btn_txt = "停 止"
      this.chou_btn_type = "danger"
    },
    // 抽取结束
    chou_end(){
      this.chou_btn_txt = "开始抽取"
      this.chou_btn_type = "primary"
    },
    read(){
      // https://api.vvhan.com/api/song?txt=%E5%86%85%E5%AE%B9
    },
  },
  watch: {
    // 选择的班级发生了改变
    chooes_class() {
      this.getStudentList();
      this.getUserFun();
    }
  },
};
</script>
<style lang="less" scoped>
#Setting_div{
  padding-top: 70px;
  width: 100%;
  height: 100vh;
  background-color: #EAEAEA;
}
.Card{
  margin-top: 10px;
  padding: 0px 10px;
}
.el-card{
  margin-bottom: 20px;
}
.choufun{
  .el-tag{
    margin-right: 10px;
    margin-top: 10px;
  }
}

// 抽取部分样式
.Extract{
  margin-top: 20px;
  padding: 40px;
  width: 100%;
  background-color:rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  align-items: center;
  .stu_img{
    width: 300px;
    height: 300px;
    border-radius: 5px;
    object-fit: cover;
    object-position: 50% 20%;
  }
  .stu_name,.stu_id{
    margin-top: 5px;
    font-size: 40px;
    font-weight:bold;
  }
  .chouqu{
    width: 200px;
    height: 50px;
    font-size: 20px;
    margin-top: 10px;
  }
}
</style>